/*
Fancy Folio
Created: 15/10/2009
By: Catalin Pinte
Contact Info: pinte_catalin@yahoo.com
*/


/* RESET CSS */
* {	margin:0; padding:0; outline:0; border:0; }

/*
   Examples of color backgrounds
   
    blue ->  background: #10304d;
   blue2 ->  background: #447fb0;
   brown ->  background: #463136;
    grey ->  background: #484848;
   green ->  background: #1c5c3b;
  green2 ->  background: #607b4a;                                                                 
  orange ->  background: #E18B1A;
    pink ->  background: #c7499c;
     red ->  background: #740f26;

*/


/* BASIC */             
body{ background:#9EC10B; background-attachment:fixed; background-position:50% 0; font-size:0.78em; line-height:18px; text-align:center; font-family:Arial, Helvetica, sans-serif;  color:#111;  }
#main {  position:relative;  width:975px; margin:auto;   }
h1, h2, h3, h4, h5, h6 { padding:0 0 10px 0; font-weight:bold; }
h1 { font-size: 3.0em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.12em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.75em; }
hr{ color: #e5e5e5; height: 1px; }

.clear { clear:both;  }
.unchecked{ list-style-type:none; background: url("../img/icons.png") 0 2px no-repeat; height:18px; padding-left:20px; margin-right:5px;  }
.checked{ list-style-type:none;  background: url("../img/icons.png") 0 -29px no-repeat;  height:18px; padding-left:20px; margin-right:10px; }
.icon-arrow { list-style-type:none;  background:url("../img/icons.png") 0 -144px no-repeat; height:18px;  padding-left:24px;  }
li.icon-arrow { background-position: 3px -139px;  }
.icon-star { list-style-type:none;  background:url("../img/icons.png") 0 -271px no-repeat; height:18px;  padding-left:24px;  }
.space { margin-top:10px; display:block; }
input { border:solid 1px #d5d5d5; padding:5px;  }
ol, ul {  list-style-position:inside; }

/* HEADER */
#header{ margin-top:40px; overflow:hidden; }
#header #logo {  margin-top:-2px; width:220px; background:url(../img/logo.png) no-repeat; height:40px; text-align:right; float:right;  }

/* Navigation  */
#navigation { height:42px; width:700px; float:left; position:relative; }
#navigation-left{ background:url(../img/nav-corners.png)  no-repeat; width:16px; height:42px; float:left; }
#navigation-middle{ background:url(../img/nav-middle.png) repeat-x; height:42px; float:left; overflow:hidden; }
#navigation-right{ background:url(../img/nav-corners.png) -16px 0 no-repeat; width:16px; height:42px; float:left;  }
#navigation ul { list-style:none; clear:right;}
#navigation ul li { float:left; margin:10px 0 0 0; color:#fff; width:91px; height:27px; text-align:center; }

#navigation ul li a { color:#fff; font-weight:bold; text-decoration:none; }
#navigation ul li a:hover { text-decoration:underline; }
#navigation ul li.current{ color:#111;  background:url(../img/hover.png) no-repeat; width:91px; height:34px; margin-top:0px; padding-top:10px;  }
#navigation ul li.current a { color:#111; text-decoration:none; }
#navigation ul li.current a:hover { text-decoration:underline; }
#navigation .hover { background:url(../img/hover.png) no-repeat; width:91px; height:34px; padding-top:10px; position:absolute; top:0px; left:0; display:none;}

#main-content { clear:both;  margin-top:25px;  } 
/* IE 6 Fix */ * html #main-content { margin-top:-15px; }

/* MAIN CONTENT */

/* Recent Projects */
#recent-projects { margin-left:-1px;  margin-bottom:25px; }
#recent-projects a { color:#fff; text-decoration:none; font-style:italic; }
#recent-projects a:hover { text-decoration:underline; }
#recent-projects .top{ background:url(../img/recent-top.png) no-repeat; width:974px; height:15px; position:relative; }
/* IE 7 Fix */  *:first-child+html #recent-projects .top {left:-1px;}
/* IE 7 Fix */  * html #recent-projects .top {left:-1px;}
#recent-projects .middle{ background:url(../img/recent-middle.png) repeat-y; width:975px; height:300px; padding-bottom:8px;  }
    #recent-projects .project{ position:absolute;  left:0; list-style:none; margin:0 0 0 14px; margin-top:-2px; width:940px; text-align:left; color:#fff; display:none; overflow:hidden; }
	/* IE 6 Fix */ * html #recent-projects .project{ left:20px; margin-left:-5px; margin-bottom:5px; width:938px; }
	
    #recent-projects .project-image { float:left; width:0px; }
    #recent-projects .project-description { float:right; margin:15px 15px 0 15px; width:310px;   }
	
	#recent-projects h3{ color:#fff;  margin-bottom:15px; padding-bottom:20px; background:url(../img/separator-dark.png) 0 100% repeat-x; }

#recent-projects .bottom{ background:url(../img/recent-bottom.png) no-repeat; width:975px; height:69px; position:relative; }
#recent-projects .bottom ul#projects-thumbs { list-style:none; margin-left:14px; float:left; left:0; }
/* IE 6 Fix */ * html #recent-projects .bottom ul#projects-thumbs {  margin-left:7px; }
#recent-projects .bottom ul#projects-thumbs li { margin:9px 10px 0 0; float:left; width:76px; height:42px; overflow:hidden; position:relative;}
#recent-projects .bottom ul#projects-thumbs li img { border:solid 1px #26231e;  }
#recent-projects .bottom .loader { width:1px; height:100%; position:absolute; background: #cdcdcd; left:0px; top:0px; display: none; } 

#recent-projects .bottom ul#controls { float:right; margin-right:20px; list-style:none; }
#recent-projects .bottom ul#controls li { float:left; margin:20px 0 10px 10px; padding-left:10px; background:url(../img/vertical-separator.png) repeat-y; }
#recent-projects .bottom ul#controls li:first-child { background:none;  }
#recent-projects .bottom ul#controls .start {  background:url("../img/icons.png") 0 -104px no-repeat; padding-left:20px; display:none; }
#recent-projects .bottom ul#controls .stop { background:url("../img/icons.png") 0 -64px no-repeat; padding-left:20px;  }
#recent-projects .bottom ul#controls .p_details { background:url("../img/icons.png") 0 -233px no-repeat; padding-left:22px; }
#recent-projects .bottom ul#controls a { color:#111; text-decoration:none; font-style:normal;  }
#recent-projects .bottom ul#controls a:hover { text-decoration:underline; }
#arrow { margin-left:32px; background:url(../img/arrow.png) no-repeat; position:absolute; height:7px; width:13px; z-index:1; display:none; }


/* Content */
#content #top-bar {  background:url(../img/top-bar.png) no-repeat; width:974px; height:27px; color:#fff; text-align:left; padding:13px 0 0 25px;  }
#content #top-bar li { list-style:none; float:left; background:url("../img/icons.png") 100% -136px no-repeat; padding-right:25px; padding-top:1px;}
#content #top-bar li:last-child { background:none; }
#content #top-bar a { color:#fff; text-decoration:none; }
#content #top-bar a:hover { text-decoration:underline; }
.homepage-icon { background:url("../img/icons.png") 0 -312px no-repeat; padding-left:20px; }
#content #middle { background:url(../img/middle-bar.png) repeat-y; width:949px; padding:19px 0 7px 22px; min-height:200px; overflow:hidden;}
/* IE 6 Fix */  * html #content #middle { margin-left:-3px; }
/* IE 7 Fix */  *:first-child+html #content #middle  { margin-left:-3px; }
#content #middle-home ul#columns { list-style:none; overflow:hidden;   }
#content #middle-home ul#columns li { width:290px; text-align:left; margin-right:25px; float:left;}
#content #middle-home h3 { margin-top:0; padding-top:0; margin-bottom:15px; padding-bottom:15px; background: url(../img/content-separator.png) 0 100% repeat-x; }
#middle h3{ margin-top:0; padding-top:0; margin-bottom:15px; padding-bottom:15px; background: url(../img/content2-separator.png) 0 100% repeat-x; }

#content #middle-home ul#columns li img{ margin:3px 0 0 0; } 
#content #middle-home ul#columns a { font-style:italic; font-weight:bold; text-decoration:none; color:#111;}
#content #middle-home ul#columns a:hover{ text-decoration:underline; }
#content #middle-home { background:url(../img/middle-bar-home.png) repeat-y; width:949px; padding:16px 0 3px 23px; min-height:200px; overflow:hidden;   }
/* IE 6 Fix */  * html #content #middle-home { margin-left:-2px; }
/* IE 7 Fix */  *:first-child+html #middle-home { margin-left:-2px; }
#content #col-left { width:615px; float:left; text-align:left; position:relative;  font-size:13px;}

#content #bottom-bar { background:url(../img/bottom-bar.png) no-repeat; width:974px; height:20px; }
#content #bottom-bar-home { background:url(../img/bottom-bar-home.png) no-repeat; width:974px; height:20px; }



/* Projects */
#content .project{ margin:0 2px 25px 0; padding-bottom:25px; overflow:hidden; width:613px; background: url(../img/content2-separator.png) 0 100% repeat-x;  }

.img-holder{ background:#fff; border: 1px solid #cdcdcd; padding:5px; float:left; position:relative; margin-bottom:10px; }
.img-holder img{width:100%; }

#content .project .project-img-holder{ background:#fff; border: 1px solid #cdcdcd; padding:5px; float:left; position:relative; }
#content .project .project-img-holder img{  width:350px; height:180px; }
#content .project .project-desc{ float:left; margin-left:20px; text-align:left; width:230px; float:left; }
#content .project ul, #content .project ol { margin-top:0; list-style:none; }
#content .project ul li:first-child { padding-left:0; }
#content .project h4 { padding-bottom:3px; }

/* IE 6 Fix */  * html #content .project .project-desc{ margin-left:15px; width:193px; }
/* IE 6 Fix */  * html #content .project .project-desc ul { margin-left:-12px; }
/* IE 6 Fix */  * html #content .project .project-desc  a.button { margin-left:3px; padding-bottom:5px; }
/* IE Fix */ #content .project ul.dotted li { width:100%; }


/* Projects DETAILS */
.detailed_project  h2{ margin-top:5px; }
.detailed_project { width:615px; height:65%; background:#f1f1f1; } 
.detailed_project .project-img-holder{ background:#fff; border: 1px solid #cdcdcd;  padding:6px; width:601px;  position:relative;  }
.detailed_project .project-img-holder img{ width:100%; }

/* Buttom "details", "read more" */
a.button { background:#f0eaea url("../img/icons.png") 5px -228px no-repeat; width:75px; display:block; height:13px;font-weight:bold; border:solid 1px #CDCDCD;  font-size:12px; color:#333; padding:4px 6px 10px 26px; text-decoration:none; margin-left:-2px; margin-top:14px; }
a:hover.button { border:solid 1px #666666; } 
 
/* Blog post */
.blog-post { margin-bottom:20px; padding-bottom:30px; margin-top:-5px; }
.blog-post .post-title{float:left; font-size: 28px; width:515px; padding-top:5px; font-weight:bold; line-height:28px;   }
.blog-post .post-title a{ font-style:normal; }
.blog-post .post-top{ overflow:hidden; clear:both;  background: url(../img/content2-separator.png) 0 100% repeat-x; padding-bottom:15px; margin-bottom:15px;  }

.blog-post .post-img-holder {background:#fff; border: 1px solid #cdcdcd; padding:5px; float:left; position:relative; margin-bottom:10px; } 
/* IE 6 Fix */  * html .blog-post .post-img-holder { margin-top:15px; }

.blog-post .date {top:6px; width:95px; float:right; position:relative; text-align:right; color:#333; clear:right; }
.blog-post .day { display:block; font-size:36px; font-weight:bold; left:20px; line-height:30px; position:absolute;  }
.blog-post .month { display:block; font-size:15px; left:63px; line-height:1em; position:absolute; text-transform:uppercase;  }
.blog-post .year { display:block; font-size:12px; font-weight:bold; left:63px; letter-spacing:1px; line-height:1em; position:absolute; top:17px;  }
.blog-post a { font-style:italic; font-weight:bold; text-decoration:none; color:#111;}
.blog-post a:hover{ text-decoration:underline; }
.blog-post .post-controls { text-align:right; margin-top:15px; border-top:solid 1px #d5d5d5; border-bottom:solid 1px #d5d5d5; padding: 5px 0 5px 0; }



/* Contact */
.contact_success { margin:25px 0 0 30px; padding:15px; width:520px; background:#69EF68; border:solid 1px green; font-size:1em; overflow:hidden; display:none; }
.contact_error { margin:25px 0 0 30px; padding:15px; width:520px; background:#FF9F9F; border:solid 1px red; font-size:1em; overflow:hidden; display:none;  }
#contact { margin:25px 0 0 17px;  }
#contact div{ width:275px; height:75px;  float:left; margin:10px 0 5px 15px; }
/* IE 6 Fix */  * html #contact div {margin-left:8px;  }
/* IE 6 Fix */  * html #contact div  input.i-text{ margin-left:-25px; }

#contact p{ width:550px; clear:both; padding:10px 0 15px 15px; }
#contact input.i-text{ width:250px; }
#contact input.i-text,
#contact textarea        { border:1px solid #CDCDCD; padding:5px; margin:8px 0 0 0; }
#contact input.i-text:focus,
#contact textarea:focus  { background:#ffc; }
#contact input.i-text.error,
#contact textarea.error { background:#FF9F9F; border:solid 1px red; }
#contact textarea        { font:.9em Verdana, Arial, Helvetica, sans-serif; width:542px; }
#contact label           { font-weight:700; font-size:13px; width:90px;  font-family:Arial, Helvetica, sans-serif;}
#contact label:after     {content:": ";}
#contact input.i-submit {  border:solid 1px #CDCDCD; background:#F0EAEA; color:#333; padding:5px 10px 5px 10px;  margin-left:15px; }
font.error { clear:both; line-height:25px;  background: url("../img/icons.png") 0 2px no-repeat; padding-left: 20px; }
font.success {clear:both; line-height:25px; background: url("../img/icons.png") 0 -31px no-repeat; padding-left: 20px;   }
#loading {  margin-left:15px; padding-left:22px; background:url(../img/ajax-loader.gif) 0 50% no-repeat;  display:none;  }
/* IE 7 Fix */  *:first-child+html #contact textarea { margin-left:-18px; } *:first-child+html #contact input.i-text { margin-left:-32px; }
/* IE 6 Fix */  * html #contact textarea { margin-left:-18px; }   * html #contact input.i-text { margin-left:-32px; }
 
/* Pagination  */
#pagination { clear:both; border:0; overflow:hidden; }
#pagination li{ border:0; margin:0; padding:0; font-size:11px; list-style:none; float:left;  }
#pagination a{ border:solid 1px #CDCDCD; margin-right:2px; background:#F0EAEA; font-size:12px; }
#pagination .previous-off,	#pagination .next-off { border:solid 1px #CDCDCD; background:#F0EAEA; color:#CDCDCD; display:block; float:left; font-weight:bold; padding:4px 6px; font-size:12px; }
#pagination .next a, #pagination .previous a { font-weight:bold; border:solid 1px #CDCDCD; background:#F0EAEA;  font-size:12px; clear:right;}	
#pagination .active{ color:red; font-weight:600; display:block; float:left; padding:4px 6px;  font-size:12px; }
#pagination a:link, #pagination a:visited { color:#333; display:block; float:left; padding:3px 6px; text-decoration:none; font-size:12px; }
#pagination a:hover{ border:solid 1px #666666; font-size:12px; }
 
ul.dotted,ol.dotted {  margin-top:10px;   }
ul.dotted li,ol.dotted li { padding-left:24px; border-bottom: dashed 1px #777; padding-bottom:10px; margin-bottom:10px; }



/* Sidebar */
#sidebar { width:270px; margin-left:23px; padding:0 15px 0 15px; float:left; text-align:left; position:relative; }
#sidebar .sticker { padding-bottom:20px; background:url(../img/shadow.png) 0 98% no-repeat; margin-bottom:20px;  } 
#sidebar .sticker-topbar { background:#d5d5d5; margin:-21px; padding:5px 16px 5px 5px; margin-bottom:20px;  }
#sidebar .sticker-topbar h5 { padding:0; }
#sidebar .sticker .wrapper {  background:#f1f1f1;  padding:20px; text-align:center; border-left:solid 1px #cdcdcd; border-bottom:solid 1px #cdcdcd;  border-right:solid 1px #cdcdcd; border-top:solid 1px #cdcdcd; text-align:right; }

#sidebar a { text-decoration:none; color:#111;  }
#sidebar a:hover { text-decoration:underline;  }

/* IE 7 Fix */  *:first-child+html #sidebar .wrapper ul { width:229px;  }
/* IE 7 Fix */  *:first-child+html #sidebar .wrapper ul li { padding-left:2px;}

#sidebar ul.side-nav { list-style:none; text-align:left;  font-size:13px; }
#sidebar ul.side-nav li { border-bottom: dashed 1px #777; padding-left:2px; padding-bottom:10px; margin-bottom:10px;  }
#sidebar ul.side-nav li.current { background:url("../img/icons.png") 5px -138px no-repeat; padding-left:24px;  }
#sidebar ul.side-nav li.current a { font-weight:bold; text-decoration:none; }
#sidebar input { border:solid 1px #d5d5d5; padding:5px; font-size:12px; width:175px; font-style:italic; }
#sidebar input.submit { border:0; background:url(../img/search-button.png) no-repeat; width:28px; height:28px; margin-left:5px;  }

/* Get in touch icons */
#social { width:240px; overflow:hidden; margin-top:20px; margin-left:-7px; }

#social a { display:block; padding:17px; margin:0; }
#social li { list-style:none;  float:left; margin:0 0 0 5px; width:35px; height:35px; }
/* IE 6 Fix */  * html #social li{ margin:0 0 0 4px; width:35px; }
/* IE 7 Fix */  *:first-child+html #social li{ margin:0 0 0 1px; width:35px; }
#social #twitter{ background: url("../img/social-icons.png") 0 0 no-repeat; }
#social #blog{ background: url("../img/social-icons.png") -70px 0 no-repeat; }
#social #delicios{ background: url("../img/social-icons.png") -142px 0 no-repeat; }
#social #digg{ background: url("../img/social-icons.png") -215px 0 no-repeat;}
#social #facebook{ background: url("../img/social-icons.png") -286px 0 no-repeat; }
#social #flikr{ background: url("../img/social-icons.png") -358px 0 no-repeat; }
#social #myspace{ background: url("../img/social-icons.png") -431px 0 no-repeat; }
#social #RSS{ background: url("../img/social-icons.png") -494px 0 no-repeat;}

.phone{ background:url("../img/icons.png") 0 -176px no-repeat;  padding-left:22px;  }
.email{background:url("../img/icons.png") 0 -196px no-repeat; padding-left:22px; }

/*  Adevertisment   */
#advertisment { width:268px; margin:auto; text-align:right; overflow:hidden; margin-bottom:15px;  }
#advertisment a { padding:0; margin:0; }
#advertisment h5 { margin-right:5px; }
#advertisment ul { margin-left:2px;  }
#advertisment li {list-style:none; display:inline; padding:0 15px 15px 0; float:left;}
#advertisment li.even {  padding:0 0 15px 0; }
/* IE 7 Fix */  *:first-child+html #content #middle ul, *:first-child+html #content #middle ol { margin-left:-15px; }


/* FOOTER */
#footer { width:955px; position:relative; margin:auto; margin-bottom:15px; padding-left:3px; font-size:10px; color:#fff; clear:right; text-align:right; }

#sub-footer { margin-top:20px; background:#000; color:#fff; border-top:solid 1px #777; width:100%; padding:15px 0 15px 0; text-align:center; overflow:hidden;  }
#sub-footer li { overflow:hidden; list-style:none; width:50px; height:50px; float:left; background:#111; padding:5px; margin:5px; border:solid 1px #161616;  }
#sub-footer li.active { background:#555; }
#sub-footer a { padding:18px 24px 18px 25px; display:block;}